<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Dimensions
        const railYTop = 100;
        const railYBottom = 250;
        const railLength = 500;
        const railXStart = (canvas.width - railLength) / 2; // 50
        const railXEnd = railXStart + railLength; // 550
        const l = railYBottom - railYTop; // 150
        
        const barWidth = 30;
        const bar1X = 150;
        const bar2X = 380;
        const d = bar2X - (bar1X + barWidth); // 200

        // Draw Rails
        ctx.beginPath();
        ctx.moveTo(railXStart, railYTop);
        ctx.lineTo(railXEnd, railYTop);
        ctx.moveTo(railXStart, railYBottom);
        ctx.lineTo(railXEnd, railYBottom);
        ctx.stroke();

        // Draw Bars
        ctx.fillStyle = '#cccccc'; // light gray
        // Bar 1
        ctx.fillRect(bar1X, railYTop, barWidth, l);
        ctx.strokeRect(bar1X, railYTop, barWidth, l);
        
        // Bar 2
        ctx.fillRect(bar2X, railYTop, barWidth, l);
        ctx.strokeRect(bar2X, railYTop, barWidth, l);

        // --- Labels ---
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px Times New Roman';

        // Labels for Bar 1
        ctx.font = 'bold 16px sans-serif';
        ctx.fillText('1', bar1X + barWidth / 2, railYTop - 15);
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('m', bar1X + barWidth / 2, railYBottom + 20);

        // Labels for Bar 2
        ctx.font = 'bold 16px sans-serif';
        ctx.fillText('2', bar2X + barWidth / 2, railYTop - 15);
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('m', bar2X + barWidth / 2, railYBottom + 20);
        ctx.font = 'bold 18px Times New Roman';
        ctx.fillText('R', bar2X + barWidth / 2, railYTop + l / 2);

        // Label and arrow for V0
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('V', 105, railYTop + l / 2);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('0', 115, railYTop + l / 2 + 7);
        
        // V0 arrow
        const vArrowY = railYTop + l / 2;
        const vArrowXStart = bar1X - 40;
        const vArrowXEnd = bar1X - 10;
        ctx.beginPath();
        ctx.moveTo(vArrowXStart, vArrowY);
        ctx.lineTo(vArrowXEnd, vArrowY);
        // arrowhead
        ctx.moveTo(vArrowXEnd - 8, vArrowY - 5);
        ctx.lineTo(vArrowXEnd, vArrowY);
        ctx.lineTo(vArrowXEnd - 8, vArrowY + 5);
        ctx.stroke();

        // Magnetic Field B
        const bFieldX = bar1X + barWidth + d / 2;
        const bFieldY = railYTop + l / 2.5;
        const bFieldRadius = 10;
        // Circle
        ctx.beginPath();
        ctx.arc(bFieldX, bFieldY, bFieldRadius, 0, 2 * Math.PI);
        ctx.stroke();
        // Cross
        ctx.beginPath();
        ctx.moveTo(bFieldX - bFieldRadius / Math.sqrt(2), bFieldY - bFieldRadius / Math.sqrt(2));
        ctx.lineTo(bFieldX + bFieldRadius / Math.sqrt(2), bFieldY + bFieldRadius / Math.sqrt(2));
        ctx.moveTo(bFieldX + bFieldRadius / Math.sqrt(2), bFieldY - bFieldRadius / Math.sqrt(2));
        ctx.lineTo(bFieldX - bFieldRadius / Math.sqrt(2), bFieldY + bFieldRadius / Math.sqrt(2));
        ctx.stroke();

        // Label B
        ctx.font = 'bold italic 20px Times New Roman';
        const bLabelX = bFieldX + 25;
        const bLabelY = bFieldY;
        ctx.fillText('B', bLabelX, bLabelY);
        // Vector arrow over B
        ctx.beginPath();
        ctx.moveTo(bLabelX - 5, bLabelY - 14);
        ctx.lineTo(bLabelX + 5, bLabelY - 14);
        // arrowhead
        ctx.moveTo(bLabelX + 2, bLabelY - 17);
        ctx.lineTo(bLabelX + 5, bLabelY - 14);
        ctx.lineTo(bLabelX + 2, bLabelY - 11);
        ctx.stroke();


        // Dimension l
        const lDimX = bar2X + barWidth + 60;
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('\u2113', lDimX + 15, railYTop + l / 2);
        // Dimension line
        ctx.beginPath();
        ctx.moveTo(lDimX, railYTop);
        ctx.lineTo(lDimX, railYBottom);
        // top arrow
        ctx.moveTo(lDimX - 5, railYTop + 8);
        ctx.lineTo(lDimX, railYTop);
        ctx.lineTo(lDimX + 5, railYTop + 8);
        // bottom arrow
        ctx.moveTo(lDimX - 5, railYBottom - 8);
        ctx.lineTo(lDimX, railYBottom);
        ctx.lineTo(lDimX + 5, railYBottom - 8);
        ctx.stroke();
        
        // Dimension d
        const dDimY = railYBottom + 40;
        const dDimXStart = bar1X + barWidth;
        const dDimXEnd = bar2X;
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('d', dDimXStart + d / 2, dDimY);
        // Dimension line
        ctx.beginPath();
        ctx.moveTo(dDimXStart, dDimY);
        ctx.lineTo(dDimXEnd, dDimY);
        // left arrow
        ctx.moveTo(dDimXStart + 8, dDimY - 5);
        ctx.lineTo(dDimXStart, dDimY);
        ctx.lineTo(dDimXStart + 8, dDimY + 5);
        // right arrow
        ctx.moveTo(dDimXEnd - 8, dDimY - 5);
        ctx.lineTo(dDimXEnd, dDimY);
        ctx.lineTo(dDimXEnd - 8, dDimY + 5);
        ctx.stroke();

    </script>
</body>
</html>